<script setup lang="ts">
import { Plus, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import RfConfig from './components/rfConfig.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import instance from '@/utils/serve'

const rfConfigRef = ref<any>(null)
const Total = ref<any>(0)
const loading = ref(false)
const rfForm = ref({
  search_text: '',
  page: 1,
  rows: 20
})
const listData = ref<any>([])
const queryType = (type: number) => {
  return type == 1 ? '表名' : '脚本'
}
const getData = async (pageNo?: any) => {
  if (pageNo) rfForm.value.page = pageNo
  const params = {
    pagination: true,
    page: 1,
    rows: 20,
    dbName: 'report',
    sqlParam: JSON.stringify({ search_text: rfForm.value.search_text })
  }
  loading.value = true
  await instance
    .post('/common/getDataGrid', { sqlId: 'report.getReportList', ...params })
    .then((res: any) => {
      loading.value = false
      Total.value = res.total
      listData.value = res.rows
    })
}
const handleSizeChange = (val: number) => {
  rfForm.value.page = 1
  rfForm.value.rows = val
  getData()
}

const handleCurrentChange = (val: number) => {
  rfForm.value.page = val
  getData()
}

// 新增报表
const isRfConfig = ref(false)
const fromInfo = ref<any>({})
const addCgRf = () => {
  // console.log('新增') {acct_type:'1',query_type:'1',acct_format:'1'}
  fromInfo.value = {}
  isRfConfig.value = true
  rfConfigRef.value?.show({ acct_type: '1', query_type: '1', acct_format: '1' })
}
// 修改报表
const changeBtn = (info: any) => {
  console.log('修改', info)
  fromInfo.value = info
  rfConfigRef.value?.show(info)
  // isRfConfig.value = true
}
// 删除报表
const delReport = (report_id: any) => {
  // console.log('删除', report_id)
  ElMessageBox.confirm('你确定要删除本条报表？', '删除报表', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      instance
        .post('/common/modify', {
          sqlId: ['report.delReport', 'report.delDim', 'report.delInd', 'report.delCond'],
          sqlParam: { report_id }
        })
        .then((res: any) => {
          if (res == 'success') {
            ElMessage({ message: '报表删除成功', type: 'success' })
            // this.$message.success('报表删除成功')
            getData
          } else {
            ElMessage({ message: '报表删除失败', type: 'error' })
            // this.$message.error('报表删除失败')
          }
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}

// 报表管理
onMounted(() => {
  getData()
})
</script>
<template>
  <div class="reportFormsBox">
    <el-form inline class="inline-form">
      <!-- 放一个隐藏input以免只有一个输入框的form回车后提交 -->
      <input style="display: none" />
      <el-form-item label="报表名称：">
        <el-input v-model="rfForm.search_text" placeholder="请输入报表名称" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" type="primary" @click="getData()">查询</el-button>
        <el-button :icon="Plus" type="success" @click="addCgRf" plain>新增</el-button>
      </el-form-item>
    </el-form>
    <el-table class="TableBox" :data="listData" stripe border>
      <el-table-column label="报表ID" width="80" align="center" prop="report_id" />
      <el-table-column label="报表名称" min-width="80" align="left" prop="report_name" />
      <el-table-column label="查询类型" align="center" width="90">
        <template v-slot="{ row }">
          <el-tag :type="row.query_type == 1 ? 'primary' : 'warning'" disable-transitions>{{
            queryType(row.query_type)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="查询表名/脚本"
        min-width="180"
        align="left"
        prop="table_name"
        show-overflow-tooltip
      />
      <el-table-column
        label="账期格式"
        align="center"
        width="90"
        :formatter="
          ({ acct_format }: any) => {
            // const m = { '1': '日', '2': '月', '3': '自定义' }
            const m = ['日', '月', '自定义']
            return m[Number(acct_format) - 1]
          }
        "
      />
      <el-table-column
        label="账期类型"
        align="center"
        width="90"
        :formatter="({ acct_type }: any) => (acct_type == 1 ? '时段' : '时点')"
      />
      <el-table-column label="维护时间" width="160" align="center" prop="operate_date" />
      <el-table-column label="操作" align="center" width="110">
        <template v-slot="{ row }">
          <el-button class="action" @click="changeBtn(row)" link type="warning">修改</el-button>
          <el-button @click="delReport(row.report_id)" link type="danger"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="rfForm.page"
      v-model:page-size="rfForm.rows"
      :page-sizes="[10, 20, 30, 40]"
      size="default"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <RfConfig
    ref="rfConfigRef"
    v-model:is-show="isRfConfig"
    :from-info="fromInfo"
    @save-success="getData"
  />
</template>
<style scoped lang="less">
.reportFormsBox {
  padding: 8px;
  :deep(.TableBox) {
    // width: 1200px !important;
    height: calc(100vh - 260px);
  }
}
</style>
